.root {
    -fx-font-size: 14px;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
    -fx-background-color: #ffffff;
}

.header {
    -fx-background-color: #212529 ;
    -fx-spacing: 5px;
    -fx-padding: 0 10px 0 0;
    -fx-pref-height: 60px;
}

.header TextField {
    -fx-min-width: 150px;
    -fx-min-height: 35px;
}

.brand {
    -fx-text-fill: #ffffff;
    -fx-font-size: 28px;
    -fx-padding: 20px;
}

.nav-item {
    -fx-background-color: transparent;
    -fx-text-fill: #ffffff;
    -fx-font-size: 16px;
    -fx-cursor: hand;
    -fx-pref-width: 80px;
}

.nav-item:hover {
    -fx-background-color: white;
    -fx-text-fill: royalblue;
}

.search {
    -fx-border-style: solid 1px;
    -fx-border-color: darkgreen;
    -fx-background-color: transparent;
    -fx-text-fill: green;
    -fx-font-size: 16px;
    -fx-cursor: hand;
    -fx-pref-width: 80px;
}

.search:hover {
    -fx-border-style: solid 1px;
    -fx-border-color: green;
    -fx-background-color: green;
    -fx-text-fill: #ffffff;
    -fx-font-size: 16px;
    -fx-cursor: hand;
}

/** left pane ***********/
.leftScrollPane {
    -fx-background-color: transparent;
}

.leftScrollPane:focused {
    -fx-background-color: transparent;
}

.leftNav{
    -fx-background-color: #f8f9fa;
    -fx-spacing: 10px;
    -fx-pref-width: 200px;
    -webkit-fx-min-with: 200px;
    -moz-fx-min-with: 200px;
    -ms-fx-min-with: 200px;
    -o-fx-min-with: 200px;
    -khtml-fx-min-with: 200px;
    fx-min-with: 200px;
}

.leftNav Label {
    -fx-text-fill: #007bff;
    -fx-cursor: hand;
    -fx-font-size: 18px;
    -fx-padding: 10 15 10 15;
    /*-fx-border-width: 1;*/
    /*-fx-border-color: transparent transparent #E8E8E8 transparent;*/
    -fx-min-width: 200px;
    -fx-pref-width: 200px;
    -fx-max-width: 200px;
}

.active {
    -fx-min-width: 200px;
    -fx-pref-width: 200px;
    -fx-max-width: 200px;
    -fx-background-color: royalblue;
    -fx-text-fill: #ffffff;
}

.centerPane {
    -fx-padding: 10px;
}

.title1 {
    -fx-font-size: 36px ;
}

.title2 {
    -fx-font-size: 28px ;
}

.placeholder {
    -fx-spacing: 250px;
    -fx-background-color: #f8f9fa;
}

.placeholder VBox {
    -fx-padding: 20px;
}

.placeholder VBox:hover {
    -fx-background-color: grey;
}

.placeholder {
    -fx-font-size: 28px;
}

.placeholder .contentText {
    -fx-text-overrun: ellipsis;
}